import leaflet from "leaflet";
import LayerINS from "./layerLoad";
var esri = require("esri-leaflet");
export default class Map2D {
    constructor(params) {
        // 图层容器
        this.layersContainter = []
        // 唯一图层容器
        this.onlyLayer = new Proxy({}, {
            set: (obj, key, value) => {
                if (obj[key]) obj[key].remove()
                obj[key] = value
                return value
            }
        })
        this.baseUrl = params.baseUrl
        // 底图容器
        this.basicLayer = []
    }
    init(isSvg) {
        let layers = []
        if (isSvg) {
            layers = [
                { type: "image", zIndex: 1, url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles" },
                { type: "image", zIndex: 2, url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles" }
            ]
        } else {
            layers = [
                { type: "image", zIndex: 1, url: "http://t0.tianditu.gov.cn/img_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles", },
                // "http://t0.tianditu.gov.cn/vec_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
                ...this.baseUrl,
                { type: "image", zIndex: 2, url: "http://t0.tianditu.gov.cn/cia_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles" },
            ]
        }
        this.basicLayer = layers.map(item => new LayerINS("2D", item))
        let layersContainter = this.basicLayer.map(item => item.layer)
        var normalMap = leaflet.layerGroup([...layersContainter]);

        this.map = leaflet.map("map2D", {
            crs: leaflet.CRS.EPSG4326, // 参考坐标系
            center: [27.365398, 118.858661], //地图中心点
            zoom: 10, //当前缩放级别
            layers: [normalMap], //当前显示图层
            zoomControl: false, //控制是否显示缩放按钮
        });
        // console.log(this, '=ti')
        this.layerGroup = normalMap
        // dynamicMapa.setZIndex(100)
    }
    // 显示
    show(checks) {
        let layer = this.layersContainter.filter((item, index) => {
            return item.id === checks.id
        })
        // console.log(layer)
    }
    panTo(center) {
        console.log(this.map, "this.mapthis.map")
        this.map.panTo(center, {
            animate: true,
        })
    }
    draw(geoJSON, { color = "rgba(0,0,0,0)", fillColor = "rgba(0,0,0,0)" }) {
        return leaflet.geoJSON(geoJSON, {
            style: (feature) => {
                return {
                    color: color,
                    fillColor: fillColor,
                    weight: 10,
                    fillOpacity: 0.2,
                    weight: 1,
                    renderer: L.svg({ padding: 0.8 })
                }
            }
        }).addTo(this.map);
    }

    flayTo({ geoJSON, color, fillColor }) {
        this.onlyLayer.flayTo = this.draw(geoJSON, { color, fillColor })
        this.map.flyToBounds(this.onlyLayer.flayTo.getBounds());
        return this.onlyLayer.flayTo
    }
    clearDraw() {
        if (this.onlyLayer.flayTo) {
            this.onlyLayer.flayTo.remove()
        }
    }
    popup({ coord, template }, layer) {
        let frameOfReference = layer ? layer.getBounds().getCenter() : coord
        let pop = L.popup()
            .setLatLng(frameOfReference)
            .setContent(template)
            .openOn(this.map);
        // console.log(pop)
    }
    // 隐藏
    hide() {
        let layer = this.layersContainter.filter((item, index) => {
            return item.id === checks.id
        })
    }
    // 添加图层
    addLayer(params) {
        let { layer } = new LayerINS("2D", {
            type: params.type || "vector",
            url: params.href,
        });
        this.layersContainter.push({ layer, attr: params })
        layer.setZIndex(params.index || layer.index || 1000);
        layer.addTo(this.map)
    }
    // 删除图层
    removeLayer(layer) {
        this.layersContainter.forEach((item, index) => {
            if (item.attr.id === layer.id) {
                item.layer.remove()
                this.layersContainter.splice(index, 1);
            }
        })
    }
    // 清空非底图所有图层
    clean() {
        this.layersContainter.forEach(layer => {
            layer.remove()
        })
    }
    // 添加标记
    marker() {
        marker(item, {
            icon: new leaflet.Icon({
                className: "lmap-icon",
                iconUrl: require("@/assets/maps/monitor_icon.png"),
                iconSize: [36, 48],
            }),
        }).addTo(map1)
    }
    // 数据处理
    layerDataDispose(layers) {
        let layerIds = layers.map(layer => layer.id)
        let layerAreaIds = this.layersContainter.map(item => item.attr.id)
        let add = layers.filter(layer => !layerAreaIds.includes(layer.id))
        let remove = this.layersContainter.filter(item => !layerIds.includes(item.attr.id)).map(item => item.attr)
        return { add, remove }
    }
    on(params) {
        for (let i in params) {
            this.map.on(i, params[i]);
        }
    }
}